<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说详情 - 我的小说网站</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .novel-header {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        .novel-cover {
            width: 200px;
            height: 300px;
            object-fit: cover;
            margin-right: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .novel-info {
            flex: 1;
        }
        h1 {
            margin: 0 0 10px 0;
            color: #2c3e50;
        }
        .author {
            font-style: italic;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        .novel-description {
            background-color: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .chapter-list {
            list-style-type: none;
            padding: 0;
        }
        .chapter-list li {
            background-color: #fff;
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.3s ease;
        }
        .chapter-list li:hover {
            background-color: #e0e0e0;
        }
        .chapter-list a {
            text-decoration: none;
            color: #3498db;
        }
        @media (max-width: 600px) {
            .novel-header {
                flex-direction: column;
            }
            .novel-cover {
                width: 100%;
                height: auto;
                margin-right: 0;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <article class="novel-detail">
        <header class="novel-header">
            <img src="img/8187s.jpg" alt="小说封面" class="novel-cover">
            <div class="novel-info">
                <h1>星辰大海</h1>
                <p class="author">作者：张三</p>
                <div class="novel-description">
                    <h2>简介</h2>
                    <p>这是一部震撼人心的科幻巨作，讲述了人类探索宇宙的壮丽篇章。主人公小明在一次偶然的机会中发现了通往其他星系的秘密通道，由此展开了一段惊心动魄的星际冒险。在探索的过程中，他不仅要面对未知的外星文明，还要解开人类起源的终极之谜。</p>
                </div>
            </div>
        </header>
        <section class="novel-chapters">
            <h2>章节列表</h2>
            <ul class="chapter-list">
                <li><a href="#">第一章 意外发现</a></li>
                <li><a href="#">第二章 星际之门</a></li>
                <li><a href="#">第三章 陌生的世界</a></li>
                <li><a href="#">第四章 神秘文明</a></li>
                <li><a href="#">第五章 生死抉择</a></li>
            </ul>
        </section>
    </article>
</body>
</html>